import React from 'react'
import { createRef } from 'react'
class ComC extends React.Component {
    state = {
        value: '',
        value2: ''
    }
    inputRef = createRef()
    change = (e) => {
        this.setState({
            value: e.target.value
        })
    }
    change2 = () => {
        console.log(2)
        this.setState({
            value2: this.inputRef.current.value
        })

    }
    render() {
        return (
            <div>
                <div>受控组件:{this.state.value}</div>
                <input value={this.state.value} onChange={this.change}></input>
                <div>非受控组件:{this.state.value2}</div>
                <input ref={this.inputRef} ></input>
                <button onClick={this.change2}>非受控按钮</button>
            </div>

        )
    }
}
export class Test7 extends React.Component {
    render() {
        return (
            <div className="area">
                <h1>7.表单处理</h1>
                <ComC />
            </div>
        )
    }
}